<template>
    <div class="partTime">
        <div class="top">
            <van-nav-bar
                title="兼职"
                right-text="发布任务"
                :fixed="true"
                 @click-right="onClickRight"
            />
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="tab">
                <span :class="act==item.id?'active':''" @click="tabBtn(item.id)" v-for="(item,index) in tabBarList" :key="index"  v-if="index<3">{{item.moonlightedType}}</span>
                <span :class="act==-1?'active':''" @click="tabBtn(-1)">更多 <i class="iconfont iconbelow-s"></i></span>
            </div>
            <div  class="tabb" v-show="show">
                <span :class="act==item.id?'active':''" @click="tabBtn(item.id)" v-for="(item,index1) in tabBarList" :key="index1"  v-if="index1>2" >{{item.moonlightedType}}</span>
                <p @click="showtabBtn">点击收起</p>
            </div>
            <div class="lunbo">
                <!-- <img src="../assets/partTime/img1.png" alt=""> -->
                <van-swipe :autoplay="3000" style="width:100%;height:1.52rem;">
                    <van-swipe-item v-for="(item, index) in images" :key="index">
                        <img :src="item.slideshowUrl"  />
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="tabTwo">
               <div :class="acts==4?'actives':''" @click="tabBtns('4')">
                   <span>金额</span>
                   <i class="iconfont iconbelow-s"></i>
               </div>
               <div :class="acts==5?'actives':''" @click="tabBtns('5')">
                   <span>发布时间</span>
                   <i class="iconfont iconbelow-s"></i>
               </div>
               <div :class="acts==6?'actives':''" @click="tabBtns('6')">
                   <span>参与人数</span>
                   <i class="iconfont iconbelow-s"></i>
               </div>
            </div>
            <div class="list">
                <ul>
                    <li v-for="(item,index) in taskLIst" :key="index"  @click="goTaskDetail(item.id)">
                        <div class="left">
                            <!-- <img src="../assets/partTime/img2.png" alt=""> -->
                            <img :src="item.moonlightedUrl" alt="">
                        </div>
                        <div class="right">
                            <h3>{{item.moonlightedName}}</h3>
                            <p>
                                <i class="iconfont iconshangkerenshu"></i>
                                <span>{{item.moonlightedNeed}}/</span>
                                <span>{{item.moonlightedLook}}</span>
                            </p>
                            <p class="three">
                                <span>
                                    <i></i>
                                    <span></span>
                                </span>
                                <span>
                                    {{item.moonlightedDate}}
                                </span>
                            </p>
                            <p class="price">
                                ￥{{item.moonlightedMoney}}
                            </p>
                        </div>
                    </li>
                    <li v-if="taskLIst==''" class="list_">暂无数据</li>
                </ul>
            </div>
        </div>
        <tabBar></tabBar>
    </div>
</template>

<script>
import { Swipe, SwipeItem, Toast } from "vant";
import {} from "vant";
import tabBar from "../components/tabBar";
export default {
  data() {
    return {
      images: [
        require("../assets/partTime/img2.png"),
        require("../assets/partTime/img2.png")
      ],
      act: "1",
      acts: "-1",
      tabBarList: [],
      latiName: localStorage.getItem("latiName"), //获取经纬度
      longName: localStorage.getItem("longName"), //获取经纬度
      prinId: "",
      taskLIst: [],
      show: false,
      moonlightedType: "",
      moonlightedDate: 0,
      moonlightedMoney: 0,
      moonlightedNeed: 0
    };
  },
  created() {
    this.getSwiper();
    this.getTabBar();
    this.getFunctionaryInfo();
    this.getDailiTask();
  },
  methods: {
    onClickRight() {
      this.$router.push("/Release");
    },
    tabBtn(num) {
      if (num == -1) {
        this.act = num;
        this.show = !this.show;
      } else {
        this.act = num;
        this.moonlightedType = num;
        console.log(this.moonlightedType, "一级选择");
        this.getTaskList();
      }
    },
    showtabBtn() {
      this.show = false;
    },
    tabBtns(num) {
      this.acts = num;
      //   moonlightedDate: "",
      //   moonlightedMoney: "",
      //   moonlightedNeed: ""
      console.log(num);
      if (num == 4) {
        this.moonlightedDate = 0;
        this.moonlightedMoney = 1;
        this.moonlightedNeed = 0;
        this.getTaskList();
      } else if (num == 5) {
        this.getTaskList();
        this.moonlightedDate = 1;
        this.moonlightedMoney = 0;
        this.moonlightedNeed = 0;
      } else if (num == 6) {
        this.getTaskList();
        this.moonlightedDat = 0;
        this.moonlightedMone = 0;
        this.moonlightedNeed = 1;
      }
    },
    //去任务详情
    goTaskDetail(val) {
      this.$router.push({
        path: "/TaskDetailsTs",
        query: {
          id: val
        }
      });
    },
    // 轮播图
    getSwiper() {
      this.$axios.post("/cct/serveslideshow/appList", {}).then(res => {
        console.log("获取轮播图", res);
        if (res.data.code == 0) {
          this.images = res.data.rows;
        }
      });
    },
    //获取任务列表
    getTaskList() {
      var taskId =localStorage.getItem("sectedId");
      this.$axios
        .post("/cct/moonlighted/orderByType", {
          publisherId:taskId?taskId:0,
          moonlightedType: this.moonlightedType,
          moonlightedDate: this.moonlightedDate,
          moonlightedMoney: this.moonlightedMoney,
          moonlightedNeed: this.moonlightedNeed
        })
        .then(res => {
          if (res.data.code == 0) {
            console.log("获取任务列表", res.data.data);
            this.taskLIst = res.data.data;
          }
        });
    },
    //根据代理商id查询任务
    getDailiTask (){
      var taskId =localStorage.getItem("sectedId");
        this.$axios.post("/cct/moonlighted/findAlljob",{
            publisherId:taskId?taskId:0
        }).then(res =>{
          console.log("代理商id",res)
          if(res.data.code==0){
            this.taskLIst =res.data.rows; 
          }
        })
    },
    //上边tabBar
    getTabBar() {
      this.$axios.post("/cct/dir/findAllType", {}).then(res => {
        if (res.data.code == 0) {
          console.log("tab切换", res.data.data);
          this.tabBarList = res.data.data;
          this.moonlightedType = res.data.data[0].id;
        }
      });
    },


  
    //查询周围代理商获取id
    getFunctionaryInfo() {
      this.$axios
        .post("/cct/num/findAgency", {
          resellerLng: this.longName,
          resellerLat: this.latiName
        })
        .then(res => {
          console.log("获取附近区域联系人", res);
          if (res.data.code == 0) {
             this.getTabBar()
            this.principalList = res.data.rows;
            for (var i = 0; i < res.data.rows.length; i++) {
              this.prinId = res.data.rows[0].userId;
            }
            // this.getTaskList();
          }
        });
    }
  },
  components: {
    tabBar
  }
};
</script>

<style lang="less" scoped>
.partTime {
  width: 100%;
  background-color: #f8f8f8;
  font-size: 0;
  position: relative;
  .van-nav-bar__text {
    color: #38a83f;
  }
  .content {
    //  margin-bottom: 1rem;
    .tab {
      width: 100%;
      height: 0.88rem;
      display: flex;
      justify-content: space-around;
      padding: 0.1rem 0.2rem;
      box-sizing: border-box;
      align-items: center;
      position: absolute;
      top: 0.9rem;
      left: 0;
      background-color: #fff;

      span {
        font-size: 0.28rem;
        color: #666;
      }
      .active {
        color: #38a83f;
      }
    }
    .tabb {
      width: 100%;
      //   height: 0.88rem;
      display: flex;
      //   justify-content: space-around;
      padding: 0.1rem 0.2rem;
      box-sizing: border-box;
      align-items: center;
      position: absolute;
      flex-wrap: wrap;
      top: 1.5rem;
      left: 0;
      background-color: #fff;
      z-index: 999;
      transition: height 0.3s ease-in-out;
      span {
        width: 23%;
        text-align: center;
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.28rem;
        color: #666;
      }
      p {
        width: 100%;
        font-size: 0.24rem;
        line-height: 0.6rem;
        margin-top: 0.1rem;
        color: #666;
        text-align: center;
      }
      .active {
        color: #38a83f;
      }
    }
    .lunbo {
      width: 95%;
      height: 1.52rem;
      position: absolute;
      top: 1.8rem;
      left: 0;
      right: 0;
      margin: 0 auto;
      border-radius: 0.1rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .tabTwo {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      top: 3.35rem;
      left: 0;
      right: 0;
      padding: 0.1rem 0.2rem;
      box-sizing: border-box;
      margin-top: 0.3rem;
      div {
        font-size: 0.26rem;
        color: #666;
        i {
          font-size: 0.26rem;
        }
      }
      .actives {
        color: #38a83f;
      }
    }
    .list {
      width: 100%;
      padding: 0.2rem;
      box-sizing: border-box;
      position: absolute;
      top: 4.6rem;
      left: 0;
      right: 0;
      ul {
        margin-bottom: 1rem;
        li {
          display: flex;
          justify-content: flex-start;
          margin-bottom: 0.2rem;
          .left {
            width: 2rem;
            height: 2rem;
            overflow: hidden;
            border-radius: 0.15rem;
            flex-shrink: 1;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            width: 5.1rem;
            margin-left: 0.2rem;
            h3 {
              color: #3c3c3c;
              font-size: 0.3rem;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
              font-weight: bold;
            }
            p {
              font-size: 0.26rem;
              color: #666;
              margin-top: 0.1rem;
            }
            .three {
              font-size: 0.22rem;
              color: #b3b3b3;
              margin-top: 0.1rem;
            }
            .price {
              color: #da1e0b;
              font-size: 0.26rem;
            }
          }
        }
        .list_ {
          width: 100%;
          font-size: 0.26rem;
          color: #666;
        //   margin-top: 0.1rem;
          text-align: center;
          display: flex;
          justify-content: center
        }
      }
    }
  }
}
</style>
